<template>
    <div class="root">
        <image class="root-bg" :src="orderStatusBg" resize="stretch"></image>

        <!--待付款-->
        <div v-if="order.status=='待付款'" class="order">
            <div class="order-status">
                <text class="order-text">等待买家付款</text>
                <text class="order-text" v-if="order.waitpaytime">{{order.waitpaytime}}</text>
            </div>
            <image resize="stretch" class="status-img" :src="toPayIcon"></image>
        </div>
        <!--/待付款-->

        <!--待发货-->
        <div v-if="order.status=='待发货'" class="order">
            <div class="order-status">
                <text class="order-text">买家已付款</text>
                <text class="order-text">您的包裹正整装待发</text>
            </div>

            <div class="status-box">
                <image v-if="has_refund" resize="stretch" class="status-img status-refund-img" :src="refundIcon"></image>
                <image resize="stretch" class="status-img" :src="toDeliverIcon"></image>
            </div>
        </div>
        <!--/待发货-->

        <!--待收货-->
        <div v-if="order.status=='待收货'" class="order">
            <div class="order-status">
                <text class="order-text">卖家已发货</text>
                <text class="order-text" v-if="order.receipt">{{order.receipt}}</text>
            </div>

            <div class="status-box">
                <image v-if="has_refund" resize="stretch" class="status-img status-refund-img" :src="refundIcon"></image>
                <image resize="stretch" class="status-img" :src="toReceiveIcon"></image>
            </div>
        </div>
        <!--/待收货-->

        <!--已完成-->
        <div v-if="order.status=='已完成'" class="order">
            <div class="order-status">
                <text class="order-text" v-if="order.is_rate==0">待评价</text>
                <text class="order-text" v-if="order.is_rate==1">已评价</text>
            </div>
            <image resize="stretch" class="status-img" :src="successIcon"></image>
        </div>
        <!--已完成-->

        <!--交易关闭-->
        <div v-if="order.status=='交易关闭'" class="order">
            <div class="order-status">
                <text class="order-text">交易关闭</text>
            </div>
            <image resize="stretch" class="status-img" :src="closeIcon"></image>
        </div>
        <!--交易关闭-->
    </div>
</template>

<style scoped>
.root {
    position: relative;
    width: 1080px;
    height: 150px;
    flex-direction: column;
    align-items: stretch;
}
.root-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.order {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-left: 40px;
    padding-right: 40px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.order-status {
    flex-direction: column ;
    justify-content: space-between;
    padding-top: 30px;
    padding-bottom: 30px;
}
.order-text {
    color: #fff;
    font-size: 30px;
    font-family: msyhl;
}
.status-box {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.status-img {
     width: 70px;
    height: 70px;
}
.status-refund-img {
    margin-right: 52px;
}
</style>

<script type="text/ecmascript-6">
    import orderStatusBg from 'assets/images/order-status-bg.png';
    import toPayIcon from './images/icon-topay.png';
    import toDeliverIcon from './images/icon-todeliver.png';
    import toReceiveIcon from './images/icon-toreceive.png';
    import successIcon from './images/icon-success.png';
    import closeIcon from './images/icon-close.png';
    import refundIcon from './images/icon-refund.png';
    import modal from 'utils/modal';

    export default{
        props: {
            order: {
                type: Object,
                require: true
            }
        },
        data(){
            return {
                orderStatusBg: orderStatusBg,
                toPayIcon: toPayIcon,
                toDeliverIcon: toDeliverIcon,
                toReceiveIcon: toReceiveIcon,
                successIcon: successIcon,
                closeIcon: closeIcon,
                refundIcon: refundIcon
            }
        }
    }
</script>
